<template>
  <div class="main">
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <go-back></go-back>
          <div class="scrollerDiv">
            <div class="stepImage">
              <img src="~/static/images/step2.png" style="width: 100%" />
            </div>
            <div class="chooseArea">
              <div class="placeChecker" style="min-height: 5rem;">
                <div class="placeTitle">
                  <div class="title">地域倾向</div>
                  <div class="moreTip">可多选</div>
                </div>
                <checker
                  v-model="choosePlaceList"
                  type="checkbox"
                  class="checkerBox"
                  default-item-class="defaultItem"
                  selected-item-class="selectedItem"
                >
                  <checker-item @on-item-click="dianlno('place')" value>不限</checker-item>
                  <checker-item
                    @on-item-click="dianlye('place')"
                    v-for="(item, index) in checkList"
                    :key="index"
                    :value="item"
                  >{{ item }}</checker-item>
                   <checker-item
                    v-if="checkList.length===0"
                    v-for="index of 31"
                    :key="index"
                    :value="index"
                  ></checker-item>
                </checker>
              </div>
              <WantMajor
                leftTitle="意向专业"
                :showArr="zhuanye"
                plhdText="输入关键词检索专业"
                @removeArrItem="intentionList"
                :division="disv"
                radioTxt="可多选"
              ></WantMajor>
              <GetMoreChoose
                leftTitle="目标大学"
                :showArr="daxue"
                plhdText="输入关键词检索大学"
                @removeArrItem="finalList"
                modelType="2"
                radioTxt="单选"
              ></GetMoreChoose>
              <!-- <OutProviceModel
                leftTitle="排除省份"
                :showArr="outPlace"
                :proArr="checkList"
                plhdText="请输入排除省份"
                @removeProArrItem="finalOutProList"
              ></OutProviceModel>
              <GetMoreChoose
                leftTitle="排除大学"
                :showArr="outDaxue"
                plhdText="输入关键词检索大学"
                @removeArrItem="finalList"
                modelType="4"
              ></GetMoreChoose>
              <GetMoreChoose
                leftTitle="排除专业"
                :showArr="outZhuanye"
                plhdText="输入关键词检索专业"
                @removeArrItem="finalList"
                modelType="5"
              ></GetMoreChoose> -->
            </div>
            <div class="btnGroup">
              <button class="reset" @click="reset">重置</button>
              <button class="submit" @click="submit">下一步</button>
            </div>
          </div>
          <div style="width: 7.5rem;height: 1.5rem;"></div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import { Checker, CheckerItem, Loading } from "vux";
import GetMoreChoose from "~/components/GetMoreChoose1";
import OutProviceModel from "~/components/OutProviceModel";
import WantMajor from "~/components/WantMajor";
import { savePreference, getCascadeArea } from "~/api/volunteer";
import goBack from "~/components/goBack";
import ls from "store2";
export default {
  components: { 
    Checker,
    CheckerItem,
    GetMoreChoose,
    Loading,
    goBack,
    OutProviceModel,
    WantMajor
  },
  data() {
    return {
      // brnshows: ls.get("vounms"),
      choosePlaceList: [""],
      checkList: [],
      schoolTypeList: [""],
      radioList: ["公办", "民办", "中外合作", "独立院校"],
      zhuanye: [],
      daxue: [],
      outPlace: [],
      outDaxue: [],
      outZhuanye: [],
      userType: null,
      disv: ls.get("stepOneData").division
    };
  },
  created() {
    // this.commonJs.gologins();
  },
  mounted() {
    this.userType = this.$route.query.type;
    this.$vux.loading.show();
    this.getCascadeArea();
    // if (this.commonJs.isTerminal() == "isAndroid") {
    //   if (window.history && window.history.pushState) {
    //     history.pushState(null, null, document.URL);
    //     window.addEventListener("popstate", this.fun, false); //false阻止默认事件
    //   }
    // }
  },
  // destroyed: function() {
  //   window.removeEventListener("popstate", this.fun, false); //false阻止默认事件
  // },
  watch: {
    choosePlaceList(e) {
      // console.log('地域倾向：', e)
    },
    schoolTypeList(e) {
      // console.log('院校性质：', e)
    }
  },
  methods: {
    // fun() {
    //   this.$router.replace({
    //     path: "../volunteer/indexs"
    //   });
    // },
    dianlno(type) {
      if (type == "place") {
        this.choosePlaceList = [""];
      } else {
        this.schoolTypeList = [""];
      }
    },
    dianlye(type) {
      if (type == "place") {
        if (this.choosePlaceList[0] === "") {
          this.choosePlaceList.splice(0, 1);
        }
      } else {
        if (this.schoolTypeList[0] === "") {
          this.schoolTypeList.splice(0, 1);
        }
      }
    },
    getTextByJs(arr) {
      var str = "";
      for (var i = 0; i < arr.length; i++) {
        str += arr[i] + "+";
      }
      //去掉最后一个逗号(如果不需要去掉，就不用写)
      if (str.length > 0) {
        str = str.substr(0, str.length - 1);
      }
      return str;
    },
    saveStudentInfo(obj) {
      savePreference(obj)
        .then(res => {
          if (res.code === "0") {
            this.$vux.loading.hide();
            this.commonJs.gosto("stepThree", this.userType);
          }
        })
        .catch(() => {
          // this.$vux.toast.text('网络错误，请稍后再试！');
        });
    },
    getCascadeArea() {
      getCascadeArea()
        .then(res => {
          if (res.code === "0") {
            let areaData = res.data;
            let arrArea = [];
            areaData.forEach((item, index) => {
              arrArea.push(item.label);
            });
            this.checkList = arrArea;
            this.$vux.loading.hide();
          }
        })
        .catch(() => {
          // this.$vux.toast.text('网络错误，请稍后再试！');
        });
    },
    goto(routerName, queryData) {
      this.$router.replace({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    reset() {
      this.choosePlaceList = [""];
      this.schoolTypeList = [""];
      this.zhuanye = [];
      this.daxue = [];
      this.outPlace = [];
      this.outDaxue = [];
      this.outZhuanye = [];
    },
    removeItem(arr, item) {
      this.zhuanye = arr.filter(x => {
        return x !== item;
      });
    },
    submit() {
      // 需增加接口提交数据
      // this.goto('stepThree');

      let aryZye = [];
      let aryDx = [];
      let _aryZye = [];
      let _aryDx = [];
      this.zhuanye.forEach(item => {
        aryZye.push(
          item.major_code.substring(item.major_code.indexOf("&") + 1)
        );
      });
      this.daxue.forEach(item => {
        if (item.indexOf("*") > 0) {
          aryDx.push(item.substring(item.indexOf("&") + 1, item.indexOf("*")));
        } else {
          aryDx.push(item.substring(item.indexOf("&") + 1));
        }
      });
      this.outZhuanye.forEach(item => {
        _aryZye.push(item.substring(item.indexOf("&") + 1));
      });
      this.outDaxue.forEach(item => {
        _aryDx.push(item.substring(item.indexOf("&") + 1));
      });
      let obj = {
        area: this.getTextByJs(this.choosePlaceList),
        excludeArea: this.getTextByJs(this.outPlace),
        excludeCollege: this.getTextByJs(_aryDx),
        excludeMajor: this.getTextByJs(_aryZye),
        generate: 0,
        intentionCollege: this.getTextByJs(aryDx),
        intentionMajor: this.getTextByJs(aryZye),
        nature: this.getTextByJs(this.schoolTypeList),
        // "userId": 1745682,
        userType: ls.get("yxkData").userType
      };
      if (aryZye.length < 6) {
        this.$vux.confirm.show({
          content:
            "已选专业少于6个，建议选择6个以上，便于提高准确率，是否确认提交？",
          onCancel: () => {},
          onConfirm: () => {
            this.$vux.loading.show();
            this.saveStudentInfo(obj);
          }
        });
      } else {
        this.$vux.loading.show();
        this.saveStudentInfo(obj);
      }
    },

    finalList(data) {
      if (data.type == "2") {
        this.daxue = data.msgList;
      } else if (data.type == "4") {
        this.outDaxue = data.msgList;
      } else {
        this.outZhuanye = data.msgList;
      }
    },
    intentionList(data) {
      this.zhuanye = data.msgList;
    },
    // 排除省份 --- 获取数组
    finalOutProList(data) {
      this.outPlace = data.msgList;
    }
  }
};
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  height: 100vh;
  background: #fff;

  .scrollerDiv {
    padding: 0 0.3rem;
    width: 100%;

    .chooseArea {
      margin-top: 0.41rem;
      width: 100%;
      min-height: 10rem;
      height: auto;
      box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
      border-radius: 0.1rem;
      padding: 0.52rem 0.3rem 0.5rem 0.3rem;

      .placeChecker {
        .placeTitle {
          display: flex;
          justify-content: space-between;
          align-items: center;
          letter-spacing: 0.03rem;
          margin-bottom: 0.2rem;

          .title {
            color: #222;
            font-size: 0.3rem;
            font-weight: bold;
          }

          .moreTip {
            color: #bbb;
            font-size: 0.26rem;
          }
        }

        .checkerBox {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
        }

        .defaultItem {
          width: 1.48rem;
          height: 0.7rem;
          font-size: 0.26rem;
          line-height: 0.7rem;
          border-radius: 0.1rem;
          border: 2px solid transparent;
          font-weight: 500;
          background: #fafafa;
          text-align: center;
          letter-spacing: 0.05rem;
          margin-bottom: 0.12rem;
          box-sizing: border-box;
        }

        .selectedItem {
          border: 2px solid @mainColor;
          color: @mainColor;
          background: #fff;
        }
      }

      .schoolRadio {
        margin-top: 0.2rem;
        margin-bottom: 0.4rem;

        .schoolTitle {
          display: flex;
          justify-content: space-between;
          align-items: center;
          letter-spacing: 0.03rem;
          margin-bottom: 0.2rem;

          .title {
            color: #222;
            font-size: 0.3rem;
            font-weight: bold;
          }

          .moreTip {
            color: #bbb;
            font-size: 0.26rem;
          }
        }

        .defaultItem {
          width: 1.48rem;
          height: 0.7rem;
          line-height: 0.7rem;
          text-align: center;
          border: 2px solid transparent;
          border-radius: 0.1rem;
          background: #fafafa;
          color: #222;
          font-size: 0.26rem;
          font-weight: 500;
          margin-right: 0.12rem;
          margin-bottom: 0.12rem;
        }

        .selectedItem {
          border: 2px solid @mainColor;
          color: @mainColor;
          background: #fff;
        }
      }
    }

    .btnGroup {
      margin-top: 0.6rem;
      display: flex;
      justify-content: space-between;

      button {
        width: 3.35rem;
        height: 0.9rem;
        border-radius: 0.1rem;
        letter-spacing: 0.05rem;
        font-size: 0.36rem;
        font-weight: bold;
      }

      .reset {
        border: 1px solid #eee;
        background: #fff;
        color: #999;
      }

      .submit {
        border: none;
        background: @mainColor;
        color: #fff;
      }
    }
  }
}

.imgIcon {
  width: 0.4rem;
  height: 0.4rem;
}
</style>
